<template>
  <div class="content" :style="{ height: totalHeight + 'px' }">
    <div class="center">
      <div class="top">中科慧学慧记邀请绑定</div>
      <div class="phone">
        <div class="name">手机号：</div>
        <div class="right">
          <input
            v-model="phone"
            placeholder="请输入手机号"
            id="mobile"
            type="text"
          />
        </div>
      </div>
      <div class="phone active">
        <div class="name">验证码：</div>
        <div class="right">
          <input
            v-model="code"
            id="code"
            style="width: 20.33vw;"
            placeholder="请输入验证码"
            type="text"
          />
          <!-- <div class="code">获取验证码</div> -->
          <div class="code" @click="getcode">
            {{ seconds - 60 != 0 ? seconds + "s后重发" : "获取验证码" }}
          </div>
        </div>
      </div>
      <div class="footer" @click="submit">立即下载APP</div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      text: [],
      seconds: 60,
      phone: "",
      code: "",
      pid: null,
      down_url: "",
      type: 1,
      totalHeight: 700,
    };
  },
  mounted() {
    console.log(document.documentElement.clientHeight);
    this.totalHeight = document.documentElement.clientHeight;
    if (this.$route.query.pid) {
      this.pid = this.$route.query.pid;
    }
    const u = navigator.userAgent;
    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isiOS) {
      this.type = 2;
    } else {
      this.type = 1;
    }
    this.getDown();
  },
  methods: {
    getDown() {
      this.$http.post("/api/set/download").then((res) => {
        // console.log(res)
        if (this.type == 1) {
          this.down_url = res.data.android_url;
        } else {
          this.down_url = res.data.ios_url;
        }
      });
    },
    getcode() {
      let that = this;
      if (!this.phone) {
        Toast("请输入手机号");
        return;
      }
      let data = {
        mobile: this.phone,
        event: "mobilelogin",
        pid: this.pid,
      };
      this.$http.post("/api/sms/send", data).then((res) => {
        let interval = setInterval(() => {
          --that.seconds;
        }, 1000);
        setTimeout(() => {
          clearInterval(interval);
          that.disabled = false;
          that.seconds = 60;
        }, 60000);
      });
    },
    submit() {
      if (this.phone == "") {
        Toast("请输入新手机号");
        return;
      }
      if (this.code == "") {
        Toast("请输入验证码");
        return;
      }
      let data = {
        mobile: this.phone,
        code: this.code,
        event: "mobilelogin",
        pid: this.pid,
      };
      this.$http.post("/addons/xshop/index/login", data).then((res) => {
        // console.log(res.code)
        if (res.code != 1) {
          Toast.fail(res.msg);
          return;
        }
        window.location.href = this.down_url;
      });
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.content {
  width: 100%;
  min-height: 100vh;
  background: url(../assets/homeimg/bg.png) no-repeat center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.center {
  width: 87.733vw;
  height: 80vw;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 60px;
  padding: 8vw;
  box-sizing: border-box;
}
.top {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
.phone {
  margin-top: 11.3333vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.name {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-right: 5.8667vw;
}
.right {
  width: 43.2vw;
  border-bottom: 1px solid #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code {
  font-size: 10px;
  width: 17.3333vw;
  border: none;
  padding: 0;
  color: #ffb20a;
}
input {
  width: 25.3333vw;
  border: none;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fff;
  background: none;
  outline: none;
}
.phone,
.active {
  margin-top: 6.6667vw;
}
.footer {
  width: 38.9333vw;
  height: 10.6667vw;
  background: rgba(255, 178, 10, 1);
  border-radius: 40px;
  margin: 18.1333vw auto 0;
  line-height: 10.6667vw;
  text-align: center;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
</style>
